<template>
<div class="app-container">
<el-card shadow="never" class="panel">
<div slot="header" class="panel__header"><i class="el-icon-connection panel__icon"></i><div class="panel__title">设备接入向导</div></div>


<el-steps :active="step" finish-status="success" align-center class="mb12">
<el-step title="填写信息"/>
<el-step title="验证连接"/>
<el-step title="完成接入"/>
</el-steps>


<el-form ref="formRef" :model="form" :rules="rules" label-width="110px">
<el-form-item label="设备名称" prop="name"><el-input v-model="form.name"/></el-form-item>
<el-form-item label="接入地址" prop="endpoint"><el-input v-model="form.endpoint" placeholder="mqtt:// 或 http://"/></el-form-item>
<el-form-item label="密钥" prop="secret"><el-input v-model="form.secret" show-password/></el-form-item>
<el-form-item>
<el-button type="primary" :loading="testing" @click="testConn">验证连接</el-button>
<el-button :disabled="!canFinish" type="success" @click="finish">完成接入</el-button>
</el-form-item>
</el-form>


<el-alert v-if="hint" :title="hint" type="info" show-icon class="mt12"/>
</el-card>
</div>
</template>


<script>
import request from '@/utils/request'
export default { name:'DeviceConnect', data(){ return{ step:0, form:{ name:'', endpoint:'', secret:'' }, rules:{ name:[{required:true,message:'必填'}], endpoint:[{required:true,message:'必填'}], secret:[{required:true,message:'必填'}] }, testing:false, canFinish:false, hint:'' } }, methods:{ testConn(){ this.$refs.formRef.validate(async ok=>{ if(!ok) return; this.testing=true; try{ const res= await request({ url:'/device/test', method:'post', data:this.form }); this.$message.success('连接正常'); this.step=1; this.hint='连接验证通过：'+(res.msg||'ok'); this.canFinish=true }catch(e){ this.$message.error('连接失败：'+(e.message||'网络')) }finally{ this.testing=false } }) }, async finish(){ try{ await request({ url:'/device/register', method:'post', data:this.form }); this.$message.success('接入完成'); this.step=2 }catch(e){ this.$message.error('失败：'+(e.message||'网络')) } } } }
</script>


<style scoped>
.panel{ border:1px solid #ebeef5 }
.panel__header{ display:flex; align-items:center; gap:8px }
.panel__icon{ color:#5d86ff }
.mb12{ margin-bottom:12px }
.mt12{ margin-top:12px }
</style>